<template>
  <div>
    <ARow class="enter-x">
      <ACol :span="24">
        <Card class="mr-1 card-brief">
          <div :class="`${prefixCls}-header`">
            <div class="info">
              <div :class="`${prefixCls}-header-img`">
                <Avatar :src="record.avatar || headerImg" :size="64" shape="square" class="!mx-auto !block" />
              </div>
              <div :class="`${prefixCls}-header-info`">
                <Description style="width: 100%" @register="register" />
              </div>
              
            </div>
            <div>
              <!-- <a-button class="mr-5">测试</a-button> -->
              <!-- <a-button type="primary" @click="handleGoManage">登录管理端</a-button> -->
            </div>  
          </div>
        </Card>
      </ACol>

      <ACol :span="24">
        <Card class="mt-2 card-brief" >
          <div :class="`${prefixCls}-account-detail`">
            <Tabs v-model:activeKey="activeKey" :tabBarGutter="25" @change="handleChange" :tabBarStyle="tabBarStyle" animated>
              <TabPane v-for="item in getTabList" :tab="item.name" :key="item.type">
                <div :style="{ width: item.width }" style=" margin: auto">
                  <component :is="item.component" :type="item.type" :data="record" @success="handleSubmit" />
                </div>
              </TabPane>
            </Tabs>
          </div>
        </Card>
      </ACol>
    </ARow>
  </div>
</template>
<script lang="ts" setup>
  import { Card, Col, Row } from "ant-design-vue"
  import { ref, computed, unref, CSSProperties, onMounted } from "vue"
  import { Space, Upload, Avatar, Tabs, TabPane } from "ant-design-vue"
  import { Description, DescItem, useDescription } from "/@/components/Description/index"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { useRoute, useRouter } from "vue-router"
  import * as tenantUserApi from "/@/api/iam/tenantUser"
  import * as utils from "/@/utils"
  import Copy from "/@/components/My/Copy.vue"
  import * as iamCache from "/@/utils/cache/module/iam"
  import { baseInfoDescSchema, TAB_TYPE } from "./data"
  import UserAccessKey from "./components/UserAccessKey.vue"
  import UserBaseInfo from "./components/UserBaseInfo.vue"
  import UserPermission from "./components/UserPermission.vue"
  import defaultLogo from "/@/assets/images/default-app.png"
  import qs from "qs"
  import { useGo } from "/@/hooks/web/usePage"
  import { useMessage } from "/@/hooks/web/useMessage"

  const headerImg = "/default-avatar.png"
  const go = useGo()
  const { createMessage, createConfirm } = useMessage()

  const router = useRouter()
  let userId = router.currentRoute.value.params?.userId
  let reqActionTab = router.currentRoute.value.query?.actionTab
  console.log("currentRoute.params: " + userId, reqActionTab)

  const { prefixCls } = useDesign("app-detail")
  const ACol = Col
  const ARow = Row
  const activeKey = ref(TAB_TYPE.BASE_CONFIG)
  const record = ref<any>({})

  const updatePathParams = () => {
    const query = {
      ...router.currentRoute.value.query,
      actionTab: activeKey.value
    }
    window.history.replaceState({}, '', `?${qs.stringify(query)}`)
  }

  if (!reqActionTab) {
    activeKey.value = TAB_TYPE.BASE_CONFIG
  } else {
    activeKey.value = reqActionTab as string
  }

  const tabBarStyle = ref<CSSProperties>({
    marginTop: '-15px'
  })

  const [register] = useDescription({
    bordered: false,
    data: record,
    schema: baseInfoDescSchema,
  })

  const handleChange = (key: string) => {
    activeKey.value = key
    updatePathParams()

  }

  const handleSubmit = (data = {}) => {
    record.value = { ...record.value, ...data }
  }

  onMounted(async () => {
    record.value = await tenantUserApi.getTenantUser({ userId  })
    record.value.roleIds = record.value.roleList?.map(role => role.id)
  })

  const allTabList = [
    {
      type: TAB_TYPE.BASE_CONFIG,
      name: "基本信息",
      width: '90%',
      component: UserBaseInfo,
    },
    {
      type: TAB_TYPE.SECRET_CONFIG,
      name: "访问秘钥",
      width: '80%',
      component: UserAccessKey,
    },
    {
      type: TAB_TYPE.ASSIGN_PERIMSIONS,
      name: "权限管理",
      width: '80%',
      component: UserPermission,
    },
  ]

  const getTabList = computed(() => {
    const { customLoginConfigFlag } = record.value
    let tabs : any = allTabList
    if (!customLoginConfigFlag) {
      tabs = allTabList.filter(e => e.type != TAB_TYPE.PROTOCOL_CONFIG && e.type != TAB_TYPE.LOGIN_CONTROLL)
    }
    return tabs
  })
</script>

<style lang="less">
  @prefix-cls: ~"@{namespace}-app-detail";

  .@{prefix-cls} {

    &-header .info {
      display: flex;
      width: 80%;
    }

    &-header {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
    }

    &-header-img {
      margin-right: 15px;
    }

    &-header-info {

    }
  }
</style>
